import { useRouteError } from 'react-router';

export default function ErrorPage() {
  const error = useRouteError();
  console.error(error);
  return (
    <div>
      <h1>Oops!</h1>
      <p>Sorry, an unexpected error has occurred.</p>
      <p>
        <i>
          {(() => {
            if (typeof error === 'object' && error !== null) {
              // @ts-expect-error: error may not have these properties
              return error.statusText || error.message;
            }
            return String(error);
          })()}
        </i>
      </p>
    </div>
  );
}
